<html>
<head>
	<style>
		table{cellspacing:"0";}
		td{border:1px solid;}
		.detail{display:none; width:600px; overflow-x:scroll}
		.diff{color:red}
		.expand{padding-left:10px;font-size:16px}
		.expand:visited{color:blue}
		.diff{cursor:hand;color:blue;}
		#diff{position:absolute;display:none;background-color:#F1F8E0;padding:20px;}
		.hasdiff{background-color:#F2F5A9;}
	</style>
	<script src="jquery.min.js"></script>
	<script src="defdiff.js"></script>
	<script type="text/javascript">
		var stagingData = 0, engData = 0, prodData = 0;
		var comparingEnv = 'prod';
		$(document).ready(function() {
			compare('prod');
		});
		
		function compare(env) {
			comparingEnv = env;
			
			$.ajax("https://agent8-backend-staging.appspot.com/agent8-backend/configuration/getDoDefinitions?latest=true&osType=ios&userName=4br7k3IHIcKrW5uBsNIjHr9V39aX31GcZlYNKgqePLs%3D")
			.done(function(data) {loadData(data, 'staging');})
			.fail(function(jqXHR, textStatus) {console.log("Fetch staging def data failed:" + textStatus);});
			
			var link = "https://agent8-backend.appspot.com/agent8-backend/configuration/getDoDefinitions?latest=true&osType=ios&userName=4br7k3IHIcKrW5uBsNIjHr9V39aX31GcZlYNKgqePLs%3D";
			if(env == 'eng') {
				link = "https://agent8-backend-eng.appspot.com/agent8-backend/configuration/getDoDefinitions?latest=true&osType=ios&userName=4br7k3IHIcKrW5uBsNIjHr9V39aX31GcZlYNKgqePLs%3D"
			}
			console.log("link:" + link);
			$.ajax(link)
			.done(function(data) {loadData(data, env);})
			.fail(function(jqXHR, textStatus) {console.log("Fetch " + env + " def data failed:" + textStatus);});
		}
		
		function loadData(data, env) {
			console.log(env + " def data, count:" + data.dodefs.length);
			sortData(data);
			if(env == 'staging') {
				stagingData = data;
			} else if (env == 'eng') {
				engData = data;
			} else if (env == 'prod') {
				prodData = data;
			} else {
				alert("unkown environment:" + env);
			}
			
			if(stagingData) {
				if((comparingEnv == 'prod' && prodData) || (comparingEnv == 'eng' && engData))
					displayAll();
			}
		}
		
		function displayAll() {
			console.log("Display all data");
			
			var envName = (comparingEnv=='prod'?'Production':'Engineering');
			
			$('#dodefs').html('');
			$('<tr><th>ID</th><th width="600px">Staging</th><th width="600px">' + envName + '</th></tr>').appendTo($('#dodefs'));
			
			$('#triggers').html('');
			$('<tr><th>ID</th><th width="600px">Staging1</th><th width="600px">' + envName + '</th></tr>').appendTo($('#triggers'));
			
			$('#actions').html('');
			$('<tr><th>ID</th><th width="600px">Staging2</th><th width="600px">' + envName + '</th></tr>').appendTo($('#actions'));
			
			displayData(stagingData, 'staging');
			displayData((comparingEnv=='prod'?prodData:engData), comparingEnv);
		}
		
		function showDiff(id1, id2, hover) {
			console.log('showDiff');
			var htmlText = WDiffString($(id1).text(), $(id2).text());
			var htmlTextShortened = WDiffShortenOutput(htmlText);
			console.log(id1 + " top:"+  $(id1).offset().top);
			if(hover) {
				$('#diff').css({'top':$(id1).offset().top + 30 + "px", 'left':"200px"});
			} else {
				$('#diff').css({'top':$(id1).offset().top -30 + "px", 'left':$(id1).offset().left + 10 + "px"});
			}
			$('#diff').show();
			$('#diff').html(htmlTextShortened);
			$('<button/>',{text:"Close",style:"float:left", onclick:'$("#diff").hide();'}).appendTo($('#diff'));
		}
		
		function displayData(data, env) {
			//dodefs
			for(var i = 0; i < data.dodefs.length;i++) {
				var dodef = data.dodefs[i];
				var row = $('#dodefs-' + dodef.doId);
				if(row.length == 0) {
					row = $('<tr/>', {id:'dodefs-' + dodef.doId});
					td = $('<td/>', {id:'defcontrol-'+dodef.doId, text:dodef.doId, valign:"top"});
					td.appendTo(row);
					
					var expand = $('<a/>', {
						id:'a-dodefs-' + dodef.doId,
						href:'#a-dodefs-' + dodef.doId,
						text:"+",
						class:"expand",
						onclick:"if($(this).text()=='+') {$('.detail').hide();$('.expand').text('+');$(this).text('-');$('.dodef-detail-" + dodef.doId +
								"').show(); showDiff('#dodef-detail-staging-" + dodef.doId + "', '#dodef-detail-" + comparingEnv + "-" + dodef.doId + "');}"
								+ "else {$(this).text('+');$('.dodef-detail-" + dodef.doId + "').hide();$('#diff').html('');$('#diff').hide();}"
					});
					
					expand.appendTo(td);
					
					var diff = $('<p/>', {
						text:"Diff",
						class:'diff',
						onclick:"showDiff('#dodef-detail-staging-" + dodef.doId + "', '#dodef-detail-" + comparingEnv + "-" + dodef.doId + "', true);"
					});
					
					diff.appendTo(td);
					
					row.appendTo($('#dodefs'));
				}
				
                if(env != 'staging') {
                    if($('#dodef-staging-' + dodef.doId).length == 0) {
                        //dodef missing from staging, pad an empty one
                        $('<td/>').appendTo(row);
                    }
                }
                
				var td = $('<td/>', {id:'dodef-' + env + '-' + dodef.doId,
									html:dodef.displayName + '<br>' + dodef.lastUpdateTime
									});
				td.appendTo(row);
				dodef.lastUpdateTime = undefined;
				try{
					if(!(typeof dodef.markup == 'object')) {
						dodef.markup = JSON.parse(dodef.markup);
					}
				} catch (e) {
					console.log("Wrong markup json for " + env + "-dodef-" + dodef.doId);
				}
				var content = $('<pre/>', {id:'dodef-detail-' + env + '-' + dodef.doId,
										  class:'detail dodef-detail-' + dodef.doId,
										  text:JSON.stringify(dodef, null, 2)});
				
				if(env != 'staging') {
				   	if($(content).text() != $('#dodef-detail-staging-' + dodef.doId).text()){
				   		$('#defcontrol-' + dodef.doId).addClass('hasdiff');
				    }
				}
				content.appendTo(td);
			}
			
			//triggers
			for(var i = 0; i < data.triggers.length;i++) {
				var trigger = data.triggers[i];
				var row = $('#triggers-' + trigger.id);
				if(row.length == 0) {
					row = $('<tr/>', {id:'triggers-' + trigger.id});
					td = $('<td/>', {id:'triggercontrol-' + trigger.id, text:trigger.id, valign:"top"});
					td.appendTo(row);
					
					var expand = $('<a/>', {
						text:"+",
						id:'a-triggers-' + trigger.id,
						href:'#a-triggers-' + trigger.id,
						class:"expand",
						style:"cursor:hand",
						onclick:"if($(this).text()=='+') {$('.expand').text('+');$(this).text('-');$('.detail').hide();$('.trigger-detail-" + trigger.id +
								"').show(); showDiff('#trigger-detail-staging-" + trigger.id + "', '#trigger-detail-" + comparingEnv + "-" + trigger.id + "');}"
								+ "else {$(this).text('+');$('.trigger-detail-" + trigger.id + "').hide();$('#diff').html('');$('#diff').hide();}"
					});
					
					expand.appendTo(td);
					
					row.appendTo($('#triggers'));
				}
				
                if(env != 'staging') {
                    if($('#trigger-staging-' + trigger.id).length == 0) {
                        //trigger missing from staging, pad an empty one
                        $('<td/>').appendTo(row);
                    }
                }
                
				var td = $('<td/>', {id:'trigger-' + env + '-' + trigger.id,
									html:trigger.name
									});
				td.appendTo(row);
				
				var content = $('<pre/>', {id:'trigger-detail-' + env + '-' + trigger.id,
										  class:'detail trigger-detail-' + trigger.id,
										  text:JSON.stringify(trigger, null, 2)});
										  
				if(env != 'staging') {
					if($(content).text() != $('#trigger-detail-staging-' + trigger.id).text()){
						$('#triggercontrol-' + trigger.id).addClass('hasdiff');
					}
				}
				content.appendTo(td);
			}
			
			//actions
			for(var i = 0; i < data.actions.length;i++) {
				var action = data.actions[i];
				var row = $('#actions-' + action.id);
				if(row.length == 0) {
					row = $('<tr/>', {id:'actions-' + action.id});
					td = $('<td/>', {id:'actioncontrol-' + action.id, text:action.id, valign:"top"});
					td.appendTo(row);
					
					var expand = $('<a/>', {
						id:'a-actions-' + action.id,
						href:'#a-actions-' + action.id,
						text:"+",
						style:"cursor:hand",
						class:"expand",
						onclick:"if($(this).text()=='+') {$('.expand').text('+');$(this).text('-');$('.detail').hide();$('.action-detail-" + action.id +
								"').show(); showDiff('#action-detail-staging-" + action.id + "', '#action-detail-" + comparingEnv + "-" + action.id + "');}"
								+ "else {$(this).text('+');$('.action-detail-" + action.id + "').hide();$('#diff').html('');$('#diff').hide();}"
					});
					
					expand.appendTo(td);
					
					row.appendTo($('#actions'));
				}
				
                if(env != 'staging') {
                    if($('#action-staging-' + action.id).length == 0) {
                        //action missing from staging, pad an empty one
                        $('<td/>').appendTo(row);
                    }
                }
				var td = $('<td/>', {id:'action-' + env + '-' + action.id,
									html:action.displayName
									});
				td.appendTo(row);
				
				var content = $('<pre/>', {id:'action-detail-' + env + '-' + action.id,
										  class:'detail action-detail-' + action.id,
										  text:JSON.stringify(action, null, 2)});
				if(env != 'staging') {
					if($(content).text() != $('#action-detail-staging-' + action.id).text()){
						$('#actioncontrol-' + action.id).addClass('hasdiff');
					}
				}				
				content.appendTo(td);
			}
		}
			
		function sortData(data) {
			if(data) {
				if(data.actions) {
					data.actions.sort(function(a, b) {return a.id - b.id;});
				}
				if(data.triggers) {
					data.triggers.sort(function(a, b) {return a.id - b.id;});
				}
				if(data.dodefs) {
					data.dodefs.sort(function(a, b) {return a.doId - b.doId;});
				}
			}
		}
	</script>
</head>
<body>
<div id='diff'></div>
<button onclick="compare('eng')">Compare with Engineering</button>
<button onclick="compare('prod')">Compare with Production</button>
<h2>Do Definitions</h2>
<table id='dodefs'></table>
<h2>Triggers</h2>
<table id='triggers'></table>
<h2>Actions</h2>
<table id='actions'></table>
</body>
</html>
